<template>
  <s-layout>
    <view class="team">
      <view class="team-tab">
        <view class="team-tab-box">
          <view class="tab-item" v-for="(item,index) in tablist" :key="index">
            <view :class="{'active':current===index}" @click="handleTab(index)">{{item}}</view>
          </view>
        </view>
      </view>
      <!-- 我的订单 -->
      <scroll-view class="team-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3" @refresherrefresh="onRefresh" @scrolltolower='lower'>
        <view v-if="orderList.length > 0">
          <view v-for="goods in orderList" :key="goods.orderId">
            <uni-card>
              <view class="card-top">
                <view class="card-top-left">
                  <text style="color: #999; font-size: 24rpx;" class="mr-2">订单编号: {{goods.orderId}}</text>
                  <u-image src="/static/img/copy.png" width="24rpx" height="24rpx" @click="copy(goods.orderId)"></u-image>
                </view>
                <text style="color: #000; font-size: 24rpx;">{{tablist[Number(goods.status)-1]}}</text>
              </view>
              <u-divider></u-divider>
              <view class="goodsItem">
                <view @click="goInfo(goods.orderItems[0].goodsId)">
                  <u-image :showLoading="true" :src="goods.orderItems[0].goodsUrl" width="200rpx" height="200rpx" radius="10rpx"></u-image>
                </view>
                <view class="goodsInfo">
                  <view class="title" @click="goInfo(goods.orderItems[0].goodsId)">
                    <text style="color: #000;font-weight: 700;">{{goods.orderItems[0].goodsName}}</text>
                    <!-- <view v-if="goods.status>3" style="width: 50rpx;margin-left: 10rpx;">
                      <u-tag text="真" type="warning" plain size="mini" v-if="goods.examinersResult == 1"></u-tag>
                      <u-tag text="假" type="error" plain size="mini" v-if="goods.examinersResult == 0"></u-tag>
                    </view> -->
                  </view>
                  <view style="display: flex;justify-content: space-between;">
                    <!-- <text style="color: #999; font-size: 24rpx;">单价: {{goods.orderItems[0].goodsPrice}}</text>
                    <text style="color: #999; font-size: 24rpx;" class="ml-6">购买数量: {{goods.orderItems[0].goodsQuantity}}</text> -->
                    <view style="color: red;font-weight: 700;">¥ {{goods.totalAmount}}</view>
                    <view class="goodsBut" @click="goExaminers(goods.orderId)" v-if="goods.isCheck==1 && goods.status > 3">查看核查结果</view>
                  </view>
                  <text @click="goInfo(goods.orderItems[0].goodsId)" style="color: #999; font-size: 24rpx;">下单时间: {{goods.orderItems[0].createTime}}</text>
                  <text @click="goInfo(goods.orderItems[0].goodsId)" style="color: #999; font-size: 24rpx;">买家地址: {{goods.address}}</text>
                  <view class="btn">
                    <view class="goodsBut" @click="goChat(goods.userId,goods.userName)">联系买家</view>
                    <view class="goodsBut" @click="handleDelivery(goods.orderId)" v-if="goods.status == 4">发货</view>
                  </view>
                  <view class="btn" style="margin-top: 20rpx;">
                    <view style="color: #333;font-size: 24rpx;" @click="handleVideo(goods)" v-if="goods.status == 5 && goods.complaints == '1'">查看申诉视频</view>
                    <view style="color: blue;font-size: 24rpx;" @click="refusedComplaints(goods.orderId)" v-if="goods.status == 5 && goods.complaints == '1'">拒绝退款</view>
                    <view style="color: red;font-size: 24rpx;" @click="agreedComplaints(goods.orderId)" v-if="goods.status == 5 && goods.complaints == '1'">同意退款</view>
                  </view>
                  <view class="img" v-if="goods.isCheck==1&&goods.status>3" @click="goExaminers(goods.orderId)">
                    <u-image :showLoading="true" src="/static/img/真1.png" width="100rpx" height="100rpx" v-if="goods.examinersResult == '1'"></u-image>
                    <u-image :showLoading="true" src="/static/img/假1.png" width="100rpx" height="100rpx" v-if="goods.examinersResult == '0'"></u-image>
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
          <uni-load-more :status="loadStatus" :contentText="contentText" />
        </view>
        <s-empty v-else />
      </scroll-view>
      <u-modal :show="showDelivery" title="发货信息" showCancelButton @cancel="showDelivery=false" @confirm="submitDelivery">
        <u--form labelPosition="top" labelWidth="auto" :model="deliveryForm" ref="uForm">
          <u-form-item label=" " prop="deliveryForm.code" ref="item1">
            <u--input v-model="deliveryForm.code" placeholder="请输入快递号"></u--input>
          </u-form-item>
        </u--form>
      </u-modal>
      <!-- 授权弹窗 -->
      <s-auth-modal />
      <u-popup :show="showVideo" mode="center" :closeable="true" @close="showVideo =false">
        <view class="box">
          <video id="myVideo" :play-strategy="2" :src="video" :page-gesture="true" :enable-play-gesture="true" enable-danmu :controls="true" :loop="true"></video>
        </view>
      </u-popup>
    </view>
  </s-layout>
</template>

<script>
import {
  oderListApi,
  topUpApi,
  removeOderApi,
  confirmOrderApi,
  resubmitOrderApi,
  getRoomIdApi,
  deliveryApi,
  agreedComplaintsApi,
  refusedComplaintsApi,
} from "@/sheep/api/index";
export default {
  data() {
    return {
      tablist: [
        "全部",
        "待核查",
        "核查中",
        "待发货",
        "待收货",
        "已完成",
        "已退款",
      ],
      current: 0,
      triggered: false,
      loadStatus: "",
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多了",
      },
      paramsPage: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        sellersId: 1,
      },
      orderList: [],
      topUpForm: {
        payWay: "WX_XCX_PAY",
        amount: "",
        attach: "",
        orderType: "goods",
        desc: "商品购买",
      },
      deliveryForm: {
        orderId: null,
        code: "",
      },
      showDelivery: false,
      showVideo: false,
      video: "",
    };
  },
  onLoad(options) {
    this.current = Number(options.type);
    if (this.current) {
      this.paramsPage.status = this.current == 0 ? null : 6;
    }
    this.getList();
  },
  methods: {
    goExaminers(orderId) {
      uni.navigateTo({
        url: "/pages/examiners/edit?orderId=" + orderId,
      });
    },
    goChat(userId, nickName) {
      getRoomIdApi({ userId }).then((res) => {
        if (res.code == 200) {
          uni.navigateTo({
            url: `/pages/chat/chatDetail?roomId=${res.data}&nickName=${nickName}`,
          });
        }
      });
    },
    topUp(item) {
      this.topUpForm.amount = item.totalAmount;
      this.topUpForm.attach = item.orderId;
      topUpApi(this.topUpForm).then(({ data }) => {
        let that = this;
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.packageValue,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            that.handleTab(2);
          },
          fail: function (err) {},
        });
      });
    },
    //发货
    handleDelivery(orderId) {
      this.deliveryForm.orderId = orderId;
      this.showDelivery = true;
    },
    submitDelivery() {
      deliveryApi(this.deliveryForm).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "确认收货成功",
            duration: 1500,
          });
          this.showDelivery = false;
          this.handleTab(this.current);
        }
      });
    },
    confirmOrder(orderId) {
      confirmOrderApi(orderId).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "确认收货成功",
            duration: 1500,
          });
          this.handleTab(3);
        }
      });
    },
    resubmitOrder(orderId) {
      resubmitOrderApi(orderId).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "发起审核成功",
            duration: 1500,
          });
          this.handleTab(2);
        }
      });
    },
    removeOder(goodsGoodsId) {
      //二次确认
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消吗？",
        success: function (res) {
          if (res.confirm) {
            removeOderApi(goodsGoodsId).then((res) => {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
              that.handleTab(that.current);
            });
          } else if (res.cancel) {
          }
        },
      });
    },
    agreedComplaints(orderId) {
      agreedComplaintsApi(orderId).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          this.handleTab(this.current);
        }
      });
    },
    refusedComplaints(orderId) {
      refusedComplaintsApi(orderId).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          this.handleTab(this.current);
        }
      });
    },
    copy(value) {
      uni.setClipboardData({
        data: value,
        success: function () {},
      });
    },
    handleTab(index) {
      this.current = index;
      this.paramsPage.status = index === 0 ? null : index + 1;
      this.paramsPage.pageNum = 1;
      this.orderList = [];
      this.getList();
    },
    async getList() {
      const { rows } = await oderListApi(this.paramsPage);
      this.orderList = this.orderList.concat(rows);
      this.triggered = false;
      if (rows?.length < this.paramsPage.pageSize) {
        this.loadStatus = "noMore";
      } else {
        this.loadStatus = "more";
      }
    },
    // 下拉刷新
    onRefresh() {
      this.triggered = true;
      this.orderList = [];
      this.paramsPage.pageNum = 1;
      this.getList();
    },
    // 触底了
    lower() {
      if (this.loadStatus !== "noMore") {
        this.paramsPage.pageNum++;
        this.getList();
      }
    },
    handleVideo(goods) {
      console.log(goods.complaintsVideoUrl);
      this.video = goods.complaintsVideoUrl;
      this.showVideo = !this.showVideo;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  font-weight: 700;
  position: relative;
  &::after {
    content: "";
    width: 57rpx;
    height: 5rpx;
    background-color: #58be6b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.box {
  // height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.team {
  .team-tab {
    height: 110rpx;
    .team-tab-box {
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      background-color: #fff;
      border-bottom: 2rpx solid rgba($color: #5d5d5d, $alpha: 0.1);
      position: fixed;
      left: 0;
      right: 0;
      z-index: 99;
      display: flex;
      padding: 0 24rpx;
      .tab-item {
        height: 100%;
        flex: 1;
        text-align: center;
        color: #000000;
        font-size: 28rpx;
      }
    }
  }
  .team-box {
    height: calc(100vh - 110rpx);
    background-color: #f0f0f0;
    ::v-deep .u-divider.data-v-239d3faa {
      margin: 15rpx 0;
    }
    .card-top {
      display: flex;
      justify-content: space-between;
      .card-top-left {
        display: flex;
        align-items: center;
      }
    }
    .goodsItem {
      display: flex;
      position: relative;
      .goodsInfo {
        flex: 1;
        padding: 0 0 0 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .wordLimit {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          /* 设置最大显示行数 */
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        .title {
          display: flex;
          justify-content: space-between;
        }
        .goodsNum {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}
.goodsBut {
  display: flex;
  border-radius: 10rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
  background-color: #ff7433;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img {
  //绝对定位
  position: absolute;
  right: 20rpx;
  top: 80rpx;
  z-index: 99;
}
</style>
